Core Web Vitals（核心网页指标）

https://juejin.cn/post/7363830946908979239 在前端性能优化中，我们通常使用一系列指标来量化网页的加载速度和用户体验。目前行业内最权威的标准是 Google 提出的 Core Web Vitals（核心网页指标）。 

核心加载指标

• FCP (First Contentful Paint，首次内容绘制)

  • 是什么： 指从用户访问页面，到浏览器首次渲染出任何内容（如文本、图片、SVG 或 Canvas 元素）的时间。
  • 作用： 它直观地反映了用户看到的“白屏时间”有多长。FCP 越短，用户越早能看到页面有东西在加载。
  • 标准： 优秀标准通常在 1.8秒以内，超过 3 秒则体验较差。

• LCP (Largest Contentful Paint，最大内容绘制)

  • 是什么： 指从页面开始加载，到视口内最大的可见内容元素（通常是首屏的大图、视频封面或大段文本块）完全渲染出来的时间。
  • 作用： 它衡量的是页面主要内容的加载速度，反映了用户感知到的“页面是否加载完成”。
  • 标准： 优秀标准通常在 2.5秒以内，超过 4 秒则体验较差。

其他关键性能指标

除了 FCP 和 LCP，以下几个指标在性能分析中也极为重要：

• CLS (Cumulative Layout Shift，累积布局偏移)
  • 是什么： 衡量页面在加载和生命周期内，可见元素位置意外变动的累计得分。比如图片加载出来突然把文字挤下去了，或者弹窗突然出现导致页面抖动。
  • 标准： 优秀标准为 ≤ 0.1。
• INP (Interaction to Next Paint，下一次绘制的交互延迟)
  • 是什么： 衡量用户与页面交互（如点击按钮、输入文字）到浏览器做出视觉响应的时间。它是 Google 用来替代 FID 的新一代核心指标，能更全面地反映页面的整体交互流畅度。
  • 标准： 优秀标准为 ≤ 200毫秒。
• TTFB (Time to First Byte，首字节时间)
  • 是什么： 浏览器发起请求，到接收到服务器返回的第一个字节所花费的时间。
  • 作用： 主要反映服务器的响应速度、网络延迟以及后端处理性能。
• TTI (Time to Interactive，可交互时间)
  • 是什么： 页面加载到用户可以顺畅、可靠地与页面进行交互（如点击、滚动）的时间点。
  • 作用： 很多时候页面看着加载完了，但点击没反应，往往就是因为还没到 TTI。
• TBT (Total Blocking Time，总阻塞时间)
  • 是什么： 在 FCP 到 TTI 之间，主线程被长任务阻塞导致无法响应交互的总时间。

核心指标速查表

为了方便你记忆，这里为你整理了一份核心指标的速查表（基于 Google 通用评分标准）：

了解这些指标后，你可以通过 Chrome 浏览器的开发者工具（F12 -> Lighthouse 或 Performance 面板）来轻松检测和分析你网页的各项性能数据。